<template>
  <div id="loginDiv">
    <div id="loginLeft">

    </div>
    <div id="loginRight">
      <el-col :span="12" id="loginCol">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <span v-if="this.form.language==1">中文</span>
            <span v-if="this.form.language==0">English</span>
            <i class="el-icon-arrow-down el-icon--right"/>
          </span>
          <el-dropdown-menu dropdown>
            <el-dropdown-item command="1">中文</el-dropdown-item>
            <el-dropdown-item command="0">English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <h4 id="loginH4">用户登录</h4>
      <el-form ref="form" :model="form" id="loginForm">
        <el-form-item>
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onVerify">点击按钮进行验证</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {login} from "@/api/user/login";
import axios from "axios";

export default {
  data() {
    return {
      form: {
        language: 1
      },
      verify: false,
    }
  },
  created() {
    sessionStorage.clear();
   this.getList();
  },
  methods: {
    handleCommand(command) {
      this.form.language = command;
    },
    onSubmit() {
      if (this.verify){
        login(this.form).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message('登录成功!')
            this.$router.push({path: "/"})
            console.log(res.data)
            sessionStorage.setItem("user", JSON.stringify(res.data));
            sessionStorage.setItem("id", JSON.stringify(res.data.userId));
            sessionStorage.setItem("name", JSON.stringify(res.data.name));
            sessionStorage.setItem("language", JSON.stringify(res.data.language));
            sessionStorage.setItem("grade", JSON.stringify(res.data.grade));
          } else {
            this.$message('登录失败!')
          }
        })
      }else {
        this.$message('请先验证!')
      }
      this.verify = false;
    },
    getList(){
      this.loading=true;
      axios.post("http://localhost:10060/advertising/list",this.queryParams).then(response =>{
        console.log(response)
        this.advertisingList = response.data.list;
        console.log(this.advertisingList)
        this.total = response.data.total;
        this.loading = false;
      })
    },
    onVerify() {
      this.verify = true;
      if (this.verify) {
        this.$message('验证成功!')
      } else {
        this.$message('验证失败!')
      }
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

#loginCol {
  float: right;
  margin-top: 5px;
  margin-right: 5px;
}

#loginH4 {
  margin-top: 30px;
}

#loginDiv {
  width: 600px;
  height: 400px;
  background-color: aqua;
  border-radius: 10px;
  box-shadow: 0 0 10px #595959;
}

#loginLeft {
  float: left;
  width: 300px;
  height: 400px;
  background-color: #1890ff;
  border-radius: 10px 0 0 10px;
}

#loginRight {
  float: right;
  width: 300px;
  height: 400px;
  background-color: #ffffff;
  border-radius: 0 10px 10px 0;
}

#loginForm {
  margin: 50px 30px;
}

</style>